<template>
  <div class="wrap-container">
    <div class="table_box">
      <div class="tabs_box">
        <el-tabs v-model="tabsVal" @tab-click="handleClick">
          <el-tab-pane
            :label="`${item.name}`"
            :name="item.id"
            v-for="item in tabsList"
            :key="item.id"
          ></el-tab-pane>
        </el-tabs>
        <send-history-table
          v-if="sendHistoryTable"
          ref="sendHistoryTableRef"
        ></send-history-table>
        <receive-history-table
          v-if="receiveHistoryTable"
          ref="receiveHistoryTableRef"
        ></receive-history-table>
        <exchange-history-table
          v-if="exchangeHistoryTable"
          ref="exchangeHistoryTableRef"
        ></exchange-history-table>
        <pay-history-table
          v-if="payHistoryTable"
          ref="payHistoryTableRef"
        ></pay-history-table>
        <card-history-table
          v-if="cardHistoryTable"
          ref="cardHistoryTableRef"
        ></card-history-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import SendHistoryTable from "../common/sendHistoryTable.vue"
import ReceiveHistoryTable from "../common/receiveHistoryTable.vue"
import ExchangeHistoryTable from "../common/exchangeHistoryTable.vue"
import CardHistoryTable from "../common/cardHistoryTable.vue"
import PayHistoryTable from "../common/payHistoryTable.vue"
import type { TabsPaneContext } from 'element-plus'

// 定义响应式数据
const tabsVal = ref('1')

const tabsList = ref([
  { id: "1", name: "发放记录" },
  { id: "2", name: "领取记录" },
  { id: "3", name: "兑换记录" },
  { id: "4", name: "卡券记录" },
  { id: "5", name: "购买记录" },
])

const sendHistoryTable = ref(false)
const receiveHistoryTable = ref(false)
const exchangeHistoryTable = ref(false)
const cardHistoryTable = ref(false)
const payHistoryTable = ref(false)

const sendHistoryTableRef = ref<InstanceType<typeof SendHistoryTable> | null>(null)
const receiveHistoryTableRef = ref<InstanceType<typeof ReceiveHistoryTable> | null>(null)
const exchangeHistoryTableRef = ref<InstanceType<typeof ExchangeHistoryTable> | null>(null)
const cardHistoryTableRef = ref<InstanceType<typeof CardHistoryTable> | null>(null)
const payHistoryTableRef = ref<InstanceType<typeof PayHistoryTable> | null>(null)

onMounted(() => {
  sendHistoryTable.value = true
  sendHistoryTableRef.value?.init()
})

const handleClick = (tab: TabsPaneContext) => {
  sendHistoryTable.value = false
  receiveHistoryTable.value = false
  exchangeHistoryTable.value = false
  cardHistoryTable.value = false
  payHistoryTable.value = false
  
  if (tabsVal.value == "1") {
    sendHistoryTable.value = true
    sendHistoryTableRef.value?.init()
  } else if (tabsVal.value == "2") {
    receiveHistoryTable.value = true
    receiveHistoryTableRef.value?.init()
  } else if (tabsVal.value == "3") {
    exchangeHistoryTable.value = true
    exchangeHistoryTableRef.value?.init()
  } else if (tabsVal.value == "4") {
    cardHistoryTable.value = true
    cardHistoryTableRef.value?.init()
  } else if (tabsVal.value == "5") {
    payHistoryTable.value = true
    payHistoryTableRef.value?.init()
  }
}
</script>

<style scoped lang="scss">
.table_box {
  margin-top: 0;
}
</style>